<style scoped>
.form {
    padding: 20px;
}
.form div.ivu-form-item {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.row-submit .ivu-form-item-content {
    text-align: center;
}
.vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;
}
.veritcal-center-modal .ivu-modal-footer {
    border-top: 0px;
}
.vertical-center-modal .ivu-modal-header {
    border-bottom: 0px;
}
</style>
<template>
<div class="form">
    <Form :model="formItem">
        <FormItem>
            <Input v-model="formItem.name" placeholder="姓名"></Input>
        </FormItem>
        <FormItem>
            <Input v-model="formItem.phone" placeholder="手机"></Input>
        </FormItem>
        <FormItem>
            <Select v-model="formItem.area" placeholder="请选择" class="js-select">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </FormItem>
        <FormItem class="row-submit">
            <Button type="primary" :loading="status.posting" :icon="status.success" @click="submit">
                    <span v-if="!status.posting">提交</span>
                    <span v-else>提交中...</span>
                </Button>
        </FormItem>
    </Form>
</div>
</template>
<script>
import util from "../libs/util.js"

export default {
    data () {
        return {
            formItem: {
                name: '',
                phone: '',
                area: '',
            },
            status: {
                posting: false,
                success: ""
            },
            cityList: [
                { value: '普陀区', label: '普陀区' },
                { value: '静安区', label: '静安区' },
                { value: '杨浦区', label: '杨浦区' },
                { value: '黄浦区', label: '黄浦区' },
                { value: '南汇区', label: '南汇区' },
                { value: '嘉定区', label: '嘉定区' },
                { value: '徐汇区', label: '徐汇区' },
                { value: '金山区', label: '金山区' },
                { value: '奉贤区', label: '奉贤区' },
                { value: '闸北区', label: '闸北区' },
                { value: '长宁区', label: '长宁区' },
                { value: '闵行区', label: '闵行区' },
                { value: '青浦区', label: '青浦区' },
                { value: '宝山区', label: '宝山区' },
                { value: '虹口区', label: '虹口区' },
                { value: '浦东新区', label: '浦东新区' }
            ],
        }
    },
    methods: {
        validate() {
            return new Promise((resolve, reject) => {
                if (!this.formItem.name) {
                    reject(new Error("请填写姓名"))
                }
                if (!/^[\u4E00-\u9FA5A-Za-z]+$/g.test(this.formItem.name)) {
                    reject(new Error("请正确填写姓名"))
                }
                if (!this.formItem.phone) {
                    reject(new Error("请填写手机号码"))
                }
                if (/^1\d{10}$/.test(this.formItem.phone)) {
                    reject(new Error("请正确填写手机号码"))
                }
                resolve(true)
            })
        },
        postdata() {
            return util.ajax.post('/agent-service/api/user/login.do', this.formItem)
        },
        submit() {
            this.status.posting = true
            this.validate()
                .then(this.postdata)
                .catch((error) => {
                    this.$Modal.error({ title: '提示', content: error.message });
                }).then(() => {
                    this.status.posting = false
                })
        }
    }
}
</script>